<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>清除浮动-table</title>
        <style>
            p{
                margin: 0;
            }
            .box{
                margin-bottom: 20px;
            }
            #test p{
                float: left;
                background-color: #f00;
                
            }
            #test:before{
                content:'before';
                background-color: #ff0;
            }
            #test:after{
                content:'after';
                background-color: #f0f;
            }
            #test1 p{
                float: left;
                background-color: #f00;
                
            }
            #test1:before{
                content:'before';
                display: table;
                background-color: #ff0;
            }
            #test1:after{
                content:'after';
                display: table;
                background-color: #f0f;
            }
            #test2 p{
                float: left;
                background-color: #f00;
                
                *zoom:1;
            }
            #test2:before{
                content:'before';
                display: table;
                background-color: #ff0;
            }
            #test2:after{
                content:'after';
                display: table;
                background-color: #f0f;
                clear: both;
            }
            #test3 p{
                float: left;
                background-color: #f00;
                
                *zoom:1;
            }
            #test3:before{
                content:'before';
                display: table;
                background-color: #ff0;
                line-height: 0;
            }
            #test3:after{
                content:'after';
                display: table;
                background-color: #f0f;
                clear: both;
                line-height: 0;
            }
            #test4 p{
                float: left;
                background-color: #f00;
                
                *zoom:1;
            }
            #test4:before{
                content:'';
                display: table;
                background-color: #ff0;
                line-height: 0;
            }
            #test4:after{
                content:'';
                display: table;
                background-color: #f0f;
                clear: both;
                line-height: 0;
            }
            #test5 p{
                float: left;
                background-color: #f00;
                margin: 0;
                *zoom:1;
            }
            #test5:before{
                content:'before';
                display: block;
                background-color: #ff0;
            }
            #test5:after{
                content:'after';
                display: block;
                background-color: #f0f;
            }
            .cb{
                clear: both;
            }
        </style>
    </head>
    <body>
        <h1>清除浮动-table</h1>
        <div class="box">
            <div class="clearfix" id="test">
                <p>清除浮动</p>
            </div>
        </div>
        <div class="cb"></div>
        <div class="box">
            <p>加display:table</p>
            <div class="clearfix" id="test1">
                <p>清除浮动</p>
            </div>
        </div>
        <div class="cb"></div>
        <div class="box">
            <p>加display:block</p>
            <div class="clearfix" id="test5">
                <p>清除浮动</p>
            </div>
        </div>
        <div class="cb"></div>
        <div class="box">
            <p>加clear:both</p>
            <div class="clearfix" id="test2">
                <p>清除浮动</p>
            </div>
        </div>
        <div class="box">
            <p>加line-height:0</p>
            <div class="clearfix" id="test3">
                <p>清除浮动</p>
            </div>
        </div>
        <div class="box">
            <p>加content:''</p>
            <div class="clearfix" id="test4">
                <p>清除浮动</p>
            </div>
        </div>
    </body>
</html>